<template>
  <div class="welcome">
    <div>
      <div class="date">{{screenDate}}</div>
      <div class="title"><h1>报餐平台信息大屏</h1></div>
    </div>
    <div class="info">
      	<div class="box1"><h3>健康视频</h3>
      		<div style="padding:3%; height:86%;">
      		<iframe style="width: 100%;height:100%" frameborder="0" src="https://tv.sohu.com/s/sohuplayer/iplay.html?bid=85985820&autoplay=true&disablePlaylist=true" allowFullScreen="true" scrolling="no"></iframe>
      		</div>
      	</div>
      	<div class="box2"><h3>总用餐人数</h3>
      		<p>
      			<span>今日<br /><b>{{total.toady}}</b> 人</span>
      			<span>本周<br /><b>{{total.week}}</b> 人</span>
      			<span>本月<br /><b>{{total.month}}</b> 人</span>
    			</p>
      	</div>
      	<div class="box3"><h3>下一餐菜单</h3>
      		<p>
      			<span v-for="(item, i) in menu" :key="i"><i>{{i+1}}</i> {{item.name}}</span>
      		</p>
      	</div>
    </div>
    <div class="data">
    		<div class="box4"><h3>早餐数据</h3>
    			<ul>
    				<li><img src="../../static/time.png"> 预定人数 <b>{{breakfast.order}}</b> 人</li>
    				<li><img src="../../static/eat2.png"> 取餐人数 <b>{{breakfast.take}}</b> 人</li>
    				<li><img src="../../static/eat.png"> 未取餐人数 <b>{{breakfast.order-breakfast.take}}</b> 人</li>
    			</ul>
    		</div>
    		<div class="box5"><h3>中餐数据</h3>
    			<ul>
    				<li><img src="../../static/time.png"> 预定人数 <b>{{lunch.order}}</b> 人</li>
    				<li><img src="../../static/eat2.png"> 取餐人数 <b>{{lunch.take}}</b> 人</li>
    				<li><img src="../../static/eat.png"> 未取餐人数 <b>{{lunch.order-lunch.take}}</b> 人</li>
    			</ul>
    		</div>
    		<div class="box6"><h3>晚餐数据</h3>
    			<ul>
    				<li><img src="../../static/time.png"> 预定人数 <b>{{dinner.order}}</b> 人</li>
    				<li><img src="../../static/eat2.png"> 取餐人数 <b>{{dinner.take}}</b> 人</li>
    				<li><img src="../../static/eat.png"> 未取餐人数 <b>{{dinner.order-dinner.take}}</b> 人</li>
    			</ul>
    		</div>
    </div>
  </div>
</template>

<script>
import { fetchScreen } from '@/api/data'
export default {
  name: 'welcome',
  data() {
    return {
      screenDate: '',
      total: {},
      menu: [],
      breakfast: {},
      lunch: {},
      dinner: {}
    }
  },
  methods: {
    fetch() {
      const school_id = this.$route.query.school_id || 2
      fetchScreen(school_id).then(res => {
        this.screenDate = res.date
        this.breakfast = res.current.breakfast
        this.lunch = res.current.lunch
        this.dinner = res.current.dinner
        this.total = res.total
        this.menu = res.menu
      })
    }
  },
  created() {
    this.fetch()
  }
}
</script>

<style rel="stylesheet/scss">
body,html{ height: 100%;}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
.welcome { color: #6B8BB2; padding:0 1%;height:100%;background: #030D26;}
.title h1{ text-align: center;font-size:2vw; width:40%;background:url(../../static/title.png);background-size:100% 100%;
 margin: 0 auto; height: 10%; padding:2%;}
.date{position: absolute;right: 0; padding:2% 2% 0 0;}
.box1,.box3{background-size:100% 100%; width: 26%; height:100%;float: left;margin-right: 1%;}
.box3{background:url(../../static/box-bg2.png);background-size:100% 100%;text-align: right;}
.box1{background:url(../../static/box-bg1.png);background-size:100% 100%;text-align: left;}
.box2{background:url(../../static/box-bg3.png);background-size:100% 100%;text-align: center; width: 46%;height:100%;float: left;margin-right:1%;}
.box2 p{ padding:10% 3% 8% 3%; line-height:1.5;font-size:1.3vw;}
.box2 p b{font-size:3vw; vertical-align: middle; color:#4DFFFF; padding:0 4%; display: inline-block;}
.box2 span{ display: inline-block;width: 30%; text-align: center; vertical-align: top;}
.box3{margin-right: 0;}
.box3 p{ text-align: left; padding:10%;}
.box3 p span{ width: 50%; display: inline-block;}
.box3 p i{ background: #409EFF; padding:2% 6%; color: #FFF; border-radius:50% ; margin-right:4%;}
.title{height:15%;margin: 0;}
.info{ height:36%;margin:1% 0;}
.data{ height:46%;margin: 0;}
.box4,.box5,.box6{ width: 32.66%; height:100%; background:url(../../static/box-bg.png);background-size:100% 100%; float: left; margin-right:1%;}
.box6{margin-right: 0;}
.data h3{ text-align: center; color: #FFF;font-size:1.2vw; line-height:0.9;}
.data ul{ width:80%; padding:10% 13%;list-style: none;}
.data ul li{ margin-bottom:6%;font-size:1.2vw;}
.data ul img{ width:16%; vertical-align: middle; margin-right:4%;}
.data ul li b{font-size:3vw; vertical-align: middle; color:#4DFFFF; padding:0 4% 2% 4%; display: inline-block;}
.info h3{ text-align: center; color: #FFF;font-size:1.2vw; line-height:0.5;}
.info .box3 h3{text-align:right; padding-right:5%;line-height:0.1;}
.info .box1 h3{text-align:left;padding-left:5%;line-height:0.1;}
</style>